<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>省市级联</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
    <select id="priv">
        <option>------请选择省------</option>
    </select>
    <select id="city">
        <option>------请选择市------</option>

    </select>
</body>
<script>

    /**
     *
     *
     * //把 js对象转换为jquery 对象  $(js对象)
        //创建选项标签(  js 对象)
        let opt1 = document.createElement("option");
        // opt1.innerText = "河北省";
        //text 是jquery的方法
        $(opt1).text("河北省");
        $("#priv").append(opt1);

     *
     * @type {string[]}
     */


    //let: ES 6 新语法  var： ES5 之前的语法
    let privs = ["河北省","北京市","天津市", "河南省", "山东省"];
    let citys = [["石家庄市", "保定市", "唐山市", "廊坊", "邯郸", "秦皇岛"],
        ["昌平区", "海淀区", "朝阳区", "大兴区", "顺义区", "门头沟", "密云"],
        ["和平区", "河西区", "滨海新区", "河东区"],
        ["郑州市", "洛阳市", "安阳市", "周口市", "南阳市", "信阳市", "新乡市"],
        ["菏泽市", "济南", "青岛", "潍坊", "聊城市", "烟台", "德州"]
    ];
    //把 js对象转换为jquery 对象
    $(function(){

        for (let i = 0; i < privs.length; i++) {
            // privs[i]
            //创建标签
            let opt = document.createElement("option");
            //给option标签设置文本
            $(opt).text(privs[i]);
            $(opt).attr("value", i);
            //把option标签添加  select中
            $("#priv").append(opt);
        }



        $("#priv").change(function(event){
            //当选项改变后， 获取选择框的value，得到的是 value值（正好对应了 数组元素的索引）
            let index = $("#priv").val();
            //某个省 对应的 市数组
            let citys2 = citys[index];
            //清空所有的 option
            $("#city").empty();
            let opt = document.createElement("option");
            $(opt).text("------请选择市------");
            $("#city").append(opt);


            for (let i = 0; i < citys2.length; i++) {
                // privs[i]
                //创建标签
                let opt = document.createElement("option");
                //给option标签设置文本
                $(opt).text(citys2[i]);
                $(opt).attr("value", i);
                //把option标签添加  select中
                $("#city").append(opt);
            }
        });
    });





</script>
</html>